#tt_music_background .left { float: left; }
#tt_music_background .right { float: right; }
#tt_music_background .clear { clear: both; }
#tt_music_background { background-size: cover; position: fixed; bottom: 40px; left: 0; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;   
font: 14px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #fff;
  left: -500px;
  border-radius: 8px;  z-index: 999;  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
}
#tt_music_background #player { width: 500px; padding: 25px; margin: 0 auto 0px; position: relative; 
background-color: rgba(0, 0, 0, 0.6);  border-radius: 8px;
}
#tt_music_background #player .cover { background: rgba(0, 0, 0, 0.5); border: 1px solid #333; position: absolute; top: 15px; left: 25px; overflow: hidden; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 130px; height: 130px; -moz-box-shadow: 0 2px 10px black; -webkit-box-shadow: 0 2px 10px black; -o-box-shadow: 0 2px 10px black; box-shadow: 0 2px 10px black; }
#tt_music_background #player .cover img { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 130px; height: 130px; }
#tt_music_background #player .ctrl { margin-left: 155px; text-shadow: 0 1px 2px #000; line-height: 16px; }
#tt_music_background #player .ctrl .tag strong, #tt_music_background #player .ctrl .tag span { display: block; text-overflow: ellipsis; }
#tt_music_background #player .ctrl .tag span { font-size: 12px; margin-top: 5px; color: #ccc; }
#tt_music_background #player .ctrl .icon { background-repeat: no-repeat; background-position: center; display: inline-block; opacity: 0.6; cursor: pointer; width: 24px; height: 24px; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
#tt_music_background #player .ctrl .icon:hover, #tt_music_background #player .ctrl .icon.enable { opacity: 1; }
#tt_music_background #player .ctrl .icon:active { opacity: 0.3; }
#tt_music_background #player .ctrl .control { margin-top: 10px; height: 25px; }
#tt_music_background #player .ctrl .control .rewind { background-image: url(music/images/rewind.png); }
#tt_music_background #player .ctrl .control .playback { background-image: url(music/images/play.png); }
#tt_music_background #player .ctrl .control .playback.playing { background-image: url(music/images/pause.png); }
#tt_music_background #player .ctrl .control .fastforward { background-image: url(music/images/fastforward.png); }
#tt_music_background #player .ctrl .control .volume .mute { background-image: url(music/images/volume.png); }
#tt_music_background #player .ctrl .control .volume .mute.enable { background-image: url(music/images/mute.png); }
#tt_music_background #player .ctrl .control .volume .slider { margin-top: 11px; margin-left: 10px; width: 100px; }
#tt_music_background #player .ctrl .progress { margin-top: 10px;height:30px;background-color: rgba(0, 0, 0, 0.6); }
#tt_music_background #player .ctrl .progress .timer { font-size: 12px; color: #fff; margin-top: 8px; }
#tt_music_background #player .ctrl .progress .repeat, #tt_music_background #player .ctrl .progress .shuffle { background-position: center bottom; }
#tt_music_background #player .ctrl .progress .list { background-image: url(music/images/list.png); opacity: 1!important;}
#tt_music_background #player .ctrl .progress .repeat { background-image: url(music/images/repeat.png); }
#tt_music_background #player .ctrl .progress .repeat.once, #tt_music_background #player .ctrl .progress .repeat.all { opacity: 1; }
#tt_music_background #player .ctrl .progress .repeat.once { position: relative; }
#tt_music_background #player .ctrl .progress .repeat.once:before { content: "1"; position: absolute; top: 3px; right: -2px; font-size: 8px; }
#tt_music_background #player .ctrl .progress .shuffle { background-image: url(music/images/shuffle.png); }
#tt_music_background .slider { background: rgba(0, 0, 0, 0.3); height: 5px; position: relative; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; }
#tt_music_background .slider:hover a, #tt_music_background .slider.enable a { opacity: 1; }
#tt_music_background .slider a { background: #fff; margin-left: -2.5px; position: absolute; opacity: 0; width: 5px; height: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }
 #tt_music_background .slider .loaded,#tt_music_background .slider .pace { position: absolute; height: 100%; opacity: 0.7; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
#tt_music_background .slider .loaded { background: rgba(255, 255, 255, 0.1); }
#tt_music_background .slider .pace { background: #258fb8; }
#tt_music_background #playlist { background: #fff;padding: 10px 15px; list-style: none; position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display:none}
#tt_music_background #playlist li { color: #38343e; font-size: 12px; line-height: 2; padding-left: 25px; cursor: pointer; text-overflow: ellipsis; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
#tt_music_background #playlist li:hover { color: #169FE6; }
#tt_music_background #playlist li.playing { background: url(music/images/playing.png) no-repeat 0 center; color: #258fb8; font-weight: bold; }

.switch-player {
  position: absolute;
  top: 10px;
  right: -25px;
  width: 25px;
  height: 68px;
  line-height: 68px;
  background-color: rgba(0, 255, 0, 0.6);
  border-radius: 0 5px 5px 0;
  box-shadow: inset 5px 0 4px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 2em;
  text-align: center;
      background-image: url(music/images/xiangl.png);
  background-repeat: no-repeat;
  background-position: center;
}
.tt_show{
-webkit-transform: translate3d(500px, 0, 0);
  -moz-transform: translate3d(500px, 0, 0);
  -ms-transform: translate3d(500px, 0, 0);
  /* transform: translate3d(500px, 0, 0); */


}
.tt_show .switch-player {

  background-color: rgba(0, 0, 0, 0.4);
  color: #f30;

      background-image: url(music/images/xiang.png);
  background-repeat: no-repeat;
  background-position: center;

}
.tt_show .switch-player .fa {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.switch-player .fa {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

@media screen and (max-width: 600px) {
#tt_music_background{width:auto;left: -265px;}
#tt_music_background #player{width:auto}
#tt_music_background #player .cover{display:none}
#tt_music_background #player .ctrl{margin-left: 0;}
.tt_show{left: -500px!important;}

}